<template>
  <div>
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>课程管理</a-breadcrumb-item>
          <a-breadcrumb-item>课程列表</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10 flex align-items justify-content-between">
        <div>
          <span class="mr5"><a-button type="primary" size="small" :loading="addLoading" @click="handleOpenAdd"> <template #icon><PlusOutlined/> </template>添加</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"> <template
              #icon><CheckOutlined/> </template>批量通过</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"
                                      class="mainbg2"> <template #icon><ArrowUpOutlined/> </template>批量上架</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"
                                      class="mainbg2"> <template #icon><ArrowDownOutlined/> </template>批量下架</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0" danger> <template
              #icon><CloseOutlined/> </template>批量删除</a-button></span>
        </div>

        <a-form layout="inline"
                autocomplete="off"
                :model="formState">
          <a-form-item label="时间">
            <a-range-picker showNow showToday size="small" style="width: 240px" :placeholder="['开始时间','结束时间']"
                            v-model:value="formState.fieldD" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD"/>
          </a-form-item>
          <a-form-item label="标题">
            <a-input v-model:value="formState.fieldA" size="small" style="width: 160px" placeholder="请输入标题"
                     allow-clear/>
          </a-form-item>
          <a-form-item label="关键词">
            <a-input v-model:value="formState.fieldB" size="small" style="width: 160px" placeholder="请输入关键词"
                     allow-clear/>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                ref="select"
                size="small"
                placeholder="请选择"
                allow-clear
                v-model:value="formState.fieldC"
                style="width: 120px"
            >
              <a-select-option :value="1">发布</a-select-option>
              <a-select-option :value="0">未发布</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" size="small">
              <SearchOutlined/>
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table :columns="columns"
               rowClassName="items"
               :loading="false"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 268px)' }"
               :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
               :pagination="false"
               :data-source="dataSource"
               size="middle" sticky bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-switch v-model:checked="record.status" :checked-value="1" :un-checked-value="0" checked-children="发布中"
                      un-checked-children="未发布"/>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
            <span class="mr5">
             <a-button type="primary" size="small"> <template #icon><EditOutlined style="font-size:12px"/></template>编辑</a-button>
            </span>
              <span>
              <a-popconfirm title="你确定删除吗?" @confirm="cancel(record.key)">
               <a-button type="primary" size="small" danger> <template #icon><CloseOutlined
                   style="font-size:12px"/></template>删除</a-button>
              </a-popconfirm>
            </span>
            </div>
          </template>
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            show-size-changer
            :total="data.length"/>
      </div>
      <product-add ref="addRef"></product-add>
    </div>
  </div>
</template>
<script lang="ts" setup>
const addLoading = ref(false)
const addRef = ref({})
const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

const state = reactive({
  selectedRowKeys: [],
  loading: false,
})

const handleOpenAdd = ()=>{
  addLoading.value = true
  addRef.value.handleOpen()
  addLoading.value = false
}

const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
}

const formState = reactive({
  layout: 'horizontal',
  fieldA: null,
  fieldC: null,
  fieldD: [],
  fieldE: [],
  fieldF: null,
  fieldB: null,
});

const onSelectChange = (selectedRowKeys) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

const columns = [
  {
    fixed: "left",
    title: '标题',
    dataIndex: 'name',
    width: '300px',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: '100px',
  },
  {
    title: '地址',
    dataIndex: 'address',
    width: '200px',
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'status',
    width: '120px',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: "center",
    fixed: "right",
    width: '200px',
  },
];

const data = [];
for (let i = 0; i < 30; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    status: i % 2,
    address: `London Park no. ${i}`,
  });
}
const dataSource = ref(data);
const edit = (key: string) => {
}
const save = (key: string) => {

}
const cancel = (key: string) => {

}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
